<template>
  <div class="container">
    <div class="wrap">
      <div style="width: 100px; height: 100px"></div>
      <div style="order: 2; background: #ccc; align-self: flex-end"></div>
      <div style="order: 3; background: #6ff; flex-shrink: 2"></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <span>svg</span>
  <svg-icon icon-class="form" style="font-size:50px;color:#f10"></svg-icon>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.container {
  width: 70%;
  height: 500px;
  margin: 20px auto;
  border: 1px solid black;
}
.container .wrap {
  display: flex;
  /* flex-wrap: wrap; */
  justify-content: space-around;
  /* align-items: baseline; */
  align-items: center;

  border: 3px solid #a448cf;
  margin: 20px;
  width: 80%;
  height: 80%;
}
.container .wrap div {
  width: 150px;
  height: 150px;
  background-color: #c75a5a;
  margin: 10px;
}
</style>